<template>
  <div class="html">
    <setting-header :num="num" :center-text="centerText"></setting-header>
    <!--中间的主体部分-->
    <div class="body">
      <!--左上部分的Newsletters-->
      <div class="newsletters floatLeft">
        <span class="newsletters-title block">Newsletters</span>
        <span class="newsletters-text block">Stay up to date with our favorite projects, and any news and events that are on our radar.</span>
        <input type="button" value="Subscribe to all" class="newsletters-button"/>
      </div>
      <!--右上部分-->
      <div class="projectWeLove floatLeft">
        <div class="projectWeLove-box floatLeft" v-for="(item,key) in numlist" :key="key">
          <span class="title">Projects We Love</span>
          <span class="text">Sign up for Projects We Love to receive a Weekly mix of <br/> noteworthy projects,handpicked  by our team.</span>
          <span class="button">
            <input type="button" value="Subscribe"/>
          </span>
        </div>
        <div class="clear"></div>
      </div>
      <!--左下部分-->
      <div class="accountNotifications floatLeft">
        <span>Account Notifications</span>
      </div>
      <!--右下部分-->
      <div class="contact floatLeft">
        <div class="projects">
          <span class="contact-name block">Projects you’ve backed</span>
          <span class="contact-text block">Project updates</span>
        </div>
        <div class="following">
          <span class="contact-name block">Following</span>
          <span class="contact-text block">Someone you follow has backed or launched a project</span>
          <span class="contact-text block">Someone has followed you</span>
        </div>
        <div class="campus">
          <span class="contact-name block">Campus</span>
          <span class="contact-text block">A new answer has been posted on a question you follow</span>
          <span class="contact-text block">A daily digest of any follows or upvotes on your posts</span>
        </div>
        <div class="launched">
          <span class="contact-name block">Projects you’ve launched</span>
          <span class="contact-text block">New pledge activity(backings,adjustments,cancellations)</span>
          <span class="contact-text block">Notification Frequency
            <select class="block">
              <option>Daily Digest</option>
            </select>
          </span>
          <span class="contact-text block">New comments</span>
          <span class="contact-text block">New likes</span>
        </div>
        <div class="tips">
          <span class="contact-name block">Tips for creators</span>
          <span class="contact-text block">Advice and guidance to help you run your project</span>
        </div>
      </div>
      <div class="clear"></div>
    </div>
    <setting-footer></setting-footer>
  </div>

</template>

<script>
  import settingHeader from '../public/SettingHeader'
  import settingFooter from '../public/SettingFooter'
    export default {
        name: "setting-notifications-kickstarter",
        components:{ settingHeader, settingFooter },
        data() {
            return{
              numlist:[ '', '', '', '', '', ''],
              num:2,
              centerText:'KICKSTARTER'
            }
        },
    }
</script>

<style scoped lang="scss">
  .body{
    width: 100vw;
    background:#F1F1F1;
    padding-top: 70px;
    box-shadow: 0 1px 0 0 #DDDDDD;
  }
  /*公共部分样式*/
  .clear{clear: both;}
  .block{display: block}
  .lineBlock{display: inline-block}
  .floatLeft{float: left}
  input{
    border: none;
    outline: none;
  }
  a{text-decoration: none}
  /*左上部分的Newsletters*/
  .newsletters{
    width: 278px;
    margin:0px 84px 0 200px;
    .newsletters-title{
      font-family: PingFangSC-Medium;
      font-size: 28px;
      color: #000000;
      margin-bottom: 21px;
    }
    .newsletters-text{
      width: 277px;
      line-height: 30px;
      font-family: PingFangSC-Regular;
      font-size: 15px;
      color: #2E2E2E;
      line-height: 30px;
    }
    .newsletters-button{
      width: 278px;
      height: 45px;
      margin-top: 20px;
      background: #2C59F6;
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #FFFFFF;
    }
  }
  /*右上部分*/
  .projectWeLove{
    font-family: PingFangSC-Semibold;
    width: 722px;
    margin-bottom: 22px;
    .projectWeLove-box{
      width: 316px;
      background: #D8D8D8;
      margin:3px 45px 40px 0;
      span{
        display: block;
        width: 316px;
        background-color: white;
        padding-left:20px;
        box-sizing: border-box;
      }
    }
    .title{
      margin-top: 237px;
      padding:19px 0 11px 0;
      font-size: 18px;
      color: #282828;
    }
    .text{
      font-family: PingFangSC-Regular;
      font-size: 18px;
      color: #3D3E63;
      line-height: 24px;
      border-bottom: 1px solid #dddddd;
    }
    .button{
      padding:19px 0;
      input{
        width:276px;
        height:45px;
        background-color:#ffffff;
        border:2px solid #2C59F6;
        color:#2C59F6;
        font-size: 15px;
        letter-spacing: -0.6px;
        &:active{
          color: #FFFFFF;
          background: #2C59F6;
        }
      }
    }
  }
  /*左下部分*/
  .accountNotifications{
    width: 278px;
    line-height: 40px;
    font-family: PingFangSC-Regular;
    font-size: 28px;
    color: #2E2E2E;
    letter-spacing: -0.2px;
    margin: 118px 0 0 200px;
  }
  /*右下部分*/
  .contact{
    font-family: PingFangSC-Medium;
    letter-spacing: -0.4px;
    font-size: 18px;
    margin-left: 83px;
    margin-bottom: 109px;
    .contact-name{
      margin-top: 118px;
      color: #000000;
    }
    .contact-text{
      padding-left: 86px;
      line-height: 25px;
      margin-top: 13px;
      color: #2E2E2E;
    }
  }
  .following .contact-text:nth-child(3), .campus .contact-text:nth-child(3){margin-top: 22px;}
  .launched .contact-text:nth-child(5){margin-top:23px;}
  .launched select{
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #2E2E2E;
    letter-spacing: 0.4px;
    padding-left:10px;
    box-sizing: border-box;
    width: 198px;
    height: 46px;
    outline: none;
    margin-bottom: 20px;
  }

</style>
